<template>
  <div :id="localUUID" class="c-chartpanel"></div>
</template>

<script>
import moment from 'moment'
import { Chart, registerShape } from '@antv/g2'
import { createUUID } from '@/common/js/mUtils'
import componentRefresh from '@/mixins/componentRefresh'
// 准备数据
const DATA = []
export default {
  name: 'CChartpanel',
  mixins: [componentRefresh],
  props: {
    props: {
      type: Array,
      default: function() {
        return [
          {
            fields: []
          }
        ]
      }
    },
    width: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 300
    },
    ratio: {
      type: Number,
      default: 1
    },
    uuid: String
  },
  data() {
    return {
      localUUID: createUUID()
    }
  },
  computed: {
    dataTrigger() {
      if (this.props[1].fields[0].value.dataJson.json) {
        const result = this.props[1].fields[0].value.dataJson.json
        let dataobj = '{}'
        try {
          dataobj = JSON.parse(result)
        } catch (e) {
          console.warn(e)
          this.$message.error('JSON格式有误请重试')
          dataobj = {}
        }
        return dataobj
      } else {
        return DATA
      }
    },
    modelTrigger() {
      return this.props[1].fields[0].value.dataJson.model
    },
    LegendTextColor() {
      return this.props[0].fields[3].value[0].value.value
    },
    // LegendStyle() {
    // 	return this.props[0].fields[3].value[1].value.value;
    // },
    // LegendAlign() {
    // 	return this.props[0].fields[3].value[2].value.value;
    // },
    // LegendPosition() {
    // 	return this.props[0].fields[3].value[3].value.value;
    // },
    ChageColor() {
      return this.props[0].fields[3].value[1].value.value
    },
    RowColor1() {
      return this.props[0].fields[3].value[2].value.value
    },
    RowColor2() {
      return this.props[0].fields[3].value[3].value.value
    },
    msg() {
      return this.props[0].fields[3].value[4].value.value
    }
  },
  watch: {
    dataTrigger(val) {
      if (val && this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    modelTrigger() {
      if (this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    LegendTextColor(val) {
      if (this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    ChageColor() {
      if (this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    RowColor1() {
      if (this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    RowColor2() {
      if (this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    msg() {
      if (this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    width(val) {
      this.resizeChart()
    },
    height(val) {
      this.resizeChart()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      const width = parseInt(this.width)
      const height = parseInt(this.height)
      this.initMapping()
      registerShape('point', 'pointer', {
        draw(cfg, container) {
          const group = container.addGroup()
          const center = this.parsePoint({ x: 0, y: 0 }) // 获取极坐标系下画布中心点
          // 绘制指针
          group.addShape('line', {
            attrs: {
              x1: center.x,
              y1: center.y,
              x2: cfg.x,
              y2: cfg.y,
              stroke: cfg.color,
              lineWidth: 5,
              lineCap: 'round'
            }
          })
          group.addShape('circle', {
            attrs: {
              x: center.x,
              y: center.y,
              r: 9.75,
              stroke: cfg.color,
              lineWidth: 4.5,
              fill: '#fff'
            }
          })

          return group
        }
      })

      this.chartInstance = new Chart({
        container: this.localUUID,
        autoFit: false,
        width: width,
        height: height
      })
      this.chartInstance.data(this.dataTrigger)
      this.chartInstance.scale(this.mappings[0].field, {
        min: 0,
        max: 100,
        tickInterval: 10
      })
      this.chartInstance.coordinate('polar', {
        startAngle: (-9 / 8) * Math.PI,
        endAngle: (1 / 8) * Math.PI,
        radius: 0.75
      })

      const pos = `${this.mappings[0].field}*1` // 映射字段

      this.axisX()
      this.axisY()
      this.legend()
      this.chartInstance // 点配置
        .point()
        .position(pos)
        .shape('pointer')
        .color(this.ChageColor)
        .animate({
          appear: {
            animation: 'fade-in'
          }
        })
      // 绘制仪表盘背景
      this.chartInstance.annotation().arc({
        top: false,
        start: [0, 1],
        end: [100, 1],
        style: {
          // 底灰色
          stroke: '#4754FF55',
          lineWidth: 18,
          lineDash: null
        }
      })
      console.log('this.mappings', this.mappings)
      console.log('this.dataTrigger', this.dataTrigger)
      // 绘制指标
      this.chartInstance.annotation().arc({
        start: [0, 1],
        end: [this.dataTrigger[0][this.mappings[0].field], 1],
        style: {
          stroke: this.LegendTextColor,
          lineWidth: 18,
          lineDash: null
        }
      })
      // 绘制指标数字
      this.chartInstance.annotation().text({
        position: ['50%', '85%'],
        content: this.msg,
        style: {
          fontSize: 20,
          fill: this.RowColor1,
          textAlign: 'center'
        }
      })
      this.chartInstance.annotation().text({
        position: ['50%', '90%'],
        content: `${this.dataTrigger[0][this.mappings[0].field] * 1} %`,
        style: {
          fontSize: 36,
          fill: this.RowColor2,
          textAlign: 'center'
        },
        offsetY: 15
      })

      this.chartInstance.render()
    },
    initMapping() {
      const model = this.props[1].fields[0].value.dataJson.model
      this.mappings = model.map(m => {
        const field = m.field
        const mapping = m.mapping
        const key = mapping || field
        return { field: key }
      })
      if (!this.props[1].fields[0].value.dataJson.json) {
        this.mappings = [
          {
            field: 'Value'
          }
        ]
      }
    },
    resizeChart() {
      const width = parseInt(this.width)
      const height = parseInt(this.height)
      this.chartInstance.changeSize(width, height)
    },
    legend() {
      this.chartInstance.legend(false)
    },
    axisX() {
      this.chartInstance.axis(1, false)
    },
    axisY() {
      this.chartInstance.axis(this.mappings[0].field, {
        line: null,
        label: {
          offset: -36,
          style: {
            fontSize: 18,
            textAlign: 'center',
            textBaseline: 'middle'
          }
        },
        subTickLine: {
          count: 4,
          length: -15
        },
        tickLine: {
          length: -24
        },
        grid: null
      })
    }
  }
}
</script>

<style>
.c-chartcolumnar {
  width: 100%;
  height: 100%;
}
</style>
